<template>
  <div class="container">
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item label="选择状态：">
        <el-select v-model="statusValue" placeholder="请选择状态" clearable>
          <el-option v-for="(item,index) in statusList" :key="index" :label="item.cont" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择角色：">
        <el-select v-model="roleValue" placeholder="请选择角色" clearable>
          <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.rid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查询姓名：">
        <el-input v-model="nameValue" placeholder="请输入查询姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUsersData" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showAddUser" icon="el-icon-plus">添加用户</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="添加用户" :visible.sync="dialogAddVisible" width="500px">
      <el-form :model="addParam">
        <el-form-item label="用户名" :label-width="formLabelWidth" class="must">
          <el-input v-model="addParam.userName" autocomplete="off" placeholder="请输入数字或字母"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" class="must">
          <el-input v-model="addParam.passwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addParam.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="addParam.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="addParam.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" :label-width="formLabelWidth" class="must">
          <el-select v-model="addParam.rid" placeholder="请选择用户角色" style="width: 100%">
            <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.rid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddUser">确 定</el-button>
      </div>
    </el-dialog>
    <PagesTable :tableHeader="tableHeader" :tableData="tableData" :tableOperation="tableOperation"
      :tablePagination="tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange"
      @pageOperation="handlePageOperation" />
    <el-dialog title="修改信息" :visible.sync="dialogEditVisible" width="500px">
      <el-form :model="editParam">
        <el-form-item label="用户姓名" :label-width="formLabelWidth" class="must">
          <el-input v-model="editParam.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="editParam.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="editParam.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" :label-width="formLabelWidth" class="must">
          <el-select v-model="editParam.rid" placeholder="请选择用户角色" style="width: 100%">
            <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.rid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过期时长" :label-width="formLabelWidth">
          <el-input v-model="editParam.ttl" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEditUser">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title :visible.sync="dialogDeleteVisible" width="350px">
      <div>确定要删除该用户吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="onuserDel">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title :visible.sync="dialogUpdateVisible" width="350px">
      <div>确定要{{dialogUpdateInfo}}该用户吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="onUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";

  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        tableHeader: [{
            name: "工号",
            mark: "userID"
          },
          {
            name: "姓名",
            mark: "name"
          },
          {
            name: "用户名",
            mark: "userName"
          },
          {
            name: "角色",
            mark: "roleName"
          },
          {
            name: "邮箱",
            mark: "email",
            minWidth: "110",
            tooltip: true
          },
          {
            name: "电话",
            mark: "phone",
            minWidth: "115",
            tooltip: true
          },
          {
            name: "创建时间",
            mark: "userCreateTime",
            width: "165"
          },
          {
            name: "登录时间",
            mark: "lastLoginTime",
            width: "165"
          },
          {
            name: "登录IP",
            mark: "lastLoginIP",
            minWidth: "135"
          },
          {
            name: "状态",
            mark: "status",
            list: {
              0: "禁用",
              1: "启用"
            },
            minWidth: "60",
            marks: "status",
            color: {
              0: "red",
              1: "green"
            }
          },
          {
            name: "操作",
            mark: "",
            width: "150"
          }
        ],
        tableOperation: [{
            name: "编辑",
            mark: "edit",
            icon: true
          },
          {
            name: "删除",
            mark: "delete",
            icon: true
          },
          {
            name: "修改状态",
            mark: "status",
            list: {
              1: "circle-close",
              0: "circle-check"
            },
            icon: true
          }
        ],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 0
        },
        tableData: [],
        tableDataAll: [],
        tableDataSearch: [],
        usersParam: {},
        methodValue: "",
        methodList: [{
            label: "全部",
            value: ""
          },
          {
            label: "姓名",
            value: "name"
          },
          {
            label: "角色",
            value: "role"
          },
          {
            label: "状态",
            value: "status"
          }
        ],
        nameValue: "",
        statusValue: "",
        statusList: [],
        roleValue: "",
        roleList: [{
            roleName: "管理员",
            rid: 1,
            roleInfo: "最高权限管理员",
            createTime: "2024-06-17 10:31:12"
          },
          {
            roleName: "小员工",
            rid: 2,
            roleInfo: "最小级别员工",
            createTime: "2024-06-17 14:56:59"
          }
        ],
        dialogAddVisible: false,
        addParam: {
          userName: "",
          passwd: "",
          name: "",
          email: "",
          phone: "",
          header: "",
          status: 1,
          rid: "",
          ttl: "" //单位秒
        },
        formLabelWidth: "80px",
        dialogUpdateVisible: false,
        dialogUpdateInfo: "",
        updateParam: {
          suid: "",
          status: ""
        },
        dialogEditVisible: false,
        editParam: {
          name: "",
          email: "",
          phone: "",
          rid: "",
          suid: "",
          ttl: "",
          status: ""
        },
        dialogDeleteVisible: false,
        deleteParam: {
          suid: ""
        },
        delTokenParam: {
          userName: ""
        }
      };
    },
    mounted() {
      this.getUsersData();
      // this.getRoleData();
      // this.getUserStatusData();
    },
    methods: {
      getUsersData() {
        const self = this;
        self.methodValue = "";
        let userParam = {
          // pageSize: self.tablePagination.size,
          // pageNum: self.tablePagination.current,
          createTimeStart: "",
          createTimeEnd: "",
          name: self.nameValue,
          rid: self.roleValue,
          status: self.statusValue
        };
        // self.$axios.post("/service/__userGet", userParam).then(res => {
        //   if (res.data.status === "success") {
        self.tableDataAll = [{
            status: 1,
            userName: "admin",
            name: "管理员",
            level: 1,
            roleCreateTime: "2019-10-17 10:31:12",
            header: "",
            lastLoginIP: "154.8.213.182",
            userID: 1,
            email: "",
            phone: "",
            roleName: "管理员",
            role: 1,
            ttl: 7200,
            lastLoginTime: "2020-02-28 09:46:39",
            roleInfo: "最高权限管理员",
            createTime: "2019-10-16 10:36:12"
          },
          {
            status: 0,
            userName: "yy",
            name: "杨",
            level: 2,
            roleCreateTime: "2019-10-17 14:56:59",
            header: "",
            lastLoginIP: "0.0.0.0",
            userID: 2,
            email: "",
            phone: "",
            roleName: "小员工",
            role: 2,
            ttl: 7200,
            lastLoginTime: "2019-10-18 18:16:50",
            roleInfo: "最小级别员工",
            createTime: "2019-10-17 14:43:43"
          },
          {
            status: 1,
            userName: "s",
            name: "测试",
            level: 2,
            roleCreateTime: "2019-10-17 14:56:59",
            header: "",
            lastLoginIP: "110.179.80.178",
            userID: 4,
            email: "ss@126.com",
            phone: "13453160510",
            roleName: "小员工",
            role: 2,
            ttl: 7200,
            lastLoginTime: "2019-11-12 09:58:57",
            roleInfo: "最小级别员工",
            createTime: "2019-10-21 17:43:50"
          }
        ];
        self.tableDataSearch = self.tableDataAll;
        self.tablePagination.total = self.tableDataSearch.length;
        self.handleTableData();
        //   } else {
        //     self.$message(res.data.res);
        //   }
        // });
      },
      searchUsersData() {
        const self = this;
        if (self.methodValue === "") {
          self.tableDataSearch = self.tableDataAll;
          self.tablePagination.total = self.tableDataSearch.length;
          self.tablePagination.current = 1;
          self.handleTableData();
        } else if (self.methodValue === "name") {
          if (self.nameValue === "") {
            self.$message("请输入查询姓名");
          } else {
            self.tableDataSearch = [];
            for (let i in self.tableDataAll) {
              if (self.tableDataAll[i].name.indexOf(self.nameValue) !== -1) {
                self.tableDataSearch.push(self.tableDataAll[i]);
              }
            }
            self.tablePagination.total = self.tableDataSearch.length;
            self.tablePagination.current = 1;
            self.handleTableData();
          }
        } else if (self.methodValue === "role") {
          if (self.roleValue === "") {
            self.$message("请选择查询角色");
          } else {
            self.tableDataSearch = [];
            for (let i in self.tableDataAll) {
              if (self.tableDataAll[i].role == self.roleValue) {
                self.tableDataSearch.push(self.tableDataAll[i]);
              }
            }
            self.tablePagination.total = self.tableDataSearch.length;
            self.tablePagination.current = 1;
            self.handleTableData();
          }
        } else if (self.methodValue === "status") {
          if (self.statusValue === "") {
            self.$message("请选择查询状态");
          } else {
            self.tableDataSearch = [];
            for (let i in self.tableDataAll) {
              if (self.tableDataAll[i].status == self.statusValue) {
                self.tableDataSearch.push(self.tableDataAll[i]);
              }
            }
            self.tablePagination.total = self.tableDataSearch.length;
            self.tablePagination.current = 1;
            self.handleTableData();
          }
        }
      },
      getRoleData() {
        const self = this;
        self.$axios.post("/service/__roleGet").then(res => {
          if (res.data.status === "success") {
            self.roleList = res.data.res;
          } else {
            self.$message(res.data.res);
          }
        });
      },
      getUserStatusData() {
        const self = this;
        self.$axios.post("/service/__userStatusGet").then(res => {
          if (res.data.status === "success") {
            self.statusList = res.data.res;
          } else {
            self.$message(res.data.res);
          }
        });
      },
      handleTableData() {
        const self = this;
        self.tableData = [];
        let i = (self.tablePagination.current - 1) * self.tablePagination.size;
        let j = self.tablePagination.current * self.tablePagination.size;
        if (j > self.tablePagination.total) {
          j = self.tablePagination.total;
        }
        for (i; i < j; i++) {
          self.tableData.push(self.tableDataSearch[i]);
        }
      },
      pageSizeChange(data) {
        this.tablePagination.size = data;
        this.handleTableData();
      },
      currentPageChange(data) {
        this.tablePagination.current = data;
        this.handleTableData();
      },
      handlePageOperation(row, mark) {
        const self = this;
        if (mark === "edit") {
          self.dialogEditVisible = true;
          self.editParam.name = row.name;
          self.editParam.email = row.email;
          self.editParam.phone = row.phone;
          self.editParam.status = row.status;
          self.editParam.rid = Number(row.rid);
          self.editParam.suid = row.suid;
        } else if (mark === "delete") {
          self.dialogDeleteVisible = true;
          self.deleteParam.suid = row.suid;
          self.delTokenParam.userName = row.userName;
        } else if (mark === "status") {
          self.dialogUpdateVisible = true;
          self.updateParam.name = row.name;
          self.updateParam.email = row.email;
          self.updateParam.phone = row.phone;
          self.updateParam.rid = Number(row.rid);
          self.updateParam.suid = row.suid;
          if (row.status === 1) {
            self.updateParam.status = 0;
            self.dialogUpdateInfo = "禁用";
            self.delTokenParam.userName = row.userName;
          } else if (row.status === 0) {
            self.updateParam.status = 1;
            self.dialogUpdateInfo = "启用";
          }
        }
      },
      onUpdate() {
        //变更状态
        const self = this;
        self.$axios.post("/service/__userMod", self.updateParam).then(res => {
          self.$message(res.data.res);
          self.getUsersData();
          if (self.updateParam.status === 0) {
            self.ondelTokenByUserName();
          }
          self.dialogUpdateVisible = false;
        });
      },
      showAddUser() {
        const self = this;
        self.dialogAddVisible = true;
        self.addParam.userName = "";
        self.addParam.passwd = "";
        self.addParam.name = "";
        self.addParam.email = "";
        self.addParam.phone = "";
        self.addParam.rid = "";
      },
      onAddUser() {
        const self = this;
        const phonere = /^1[3|4|5|8]\d{9}$/;
        const emailre = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (self.addParam.userName === "") {
          self.$message("请输入用户名");
        } else if (self.addParam.passwd === "") {
          self.$message("请输入密码");
        } else if (
          self.addParam.email !== "" &&
          !emailre.test(self.addParam.email)
        ) {
          self.addParam.email = "";
          self.$message("请输入正确的邮箱格式");
        } else if (
          self.addParam.phone !== "" &&
          !phonere.test(self.addParam.phone)
        ) {
          self.addParam.phone = "";
          self.$message("请输入正确的手机号格式");
        } else {

          //密码加密
          self.addParam.passwd = hex_md5(self.addParam.passwd);

          self.$axios.post("/service/__userAdd", self.addParam).then(res => {
            self.$message(res.data.res);
            self.getUsersData();
            self.dialogAddVisible = false;
            self.addParam.userName = "";
            self.addParam.passwd = "";
            self.addParam.name = "";
            self.addParam.email = "";
            self.addParam.phone = "";
            self.addParam.rid = "";
          });
        }
      },
      onEditUser() {
        const self = this;
        self.$axios.post("/service/__userMod", self.editParam).then(res => {
          self.$message(res.data.res);
          self.getUsersData();
          self.dialogEditVisible = false;
        });
      },
      onuserDel() {
        const self = this;
        self.$axios.post("/service/__userDel", self.deleteParam).then(res => {
          self.$message(res.data.res);
          self.getUsersData();
          self.ondelTokenByUserName();
          self.tablePagination.current = 1;
          self.dialogDeleteVisible = false;
        });
      },
      ondelTokenByUserName() {
        // const self = this;
        // self.$axios
        //   .post("/service/a0000011/delTokenByUserName", self.delTokenParam)
        //   .then(res => {
        //     if (res.data.res) {
        //       self.$message(res.data.res);
        //     }
        //   });
      }
    }
  };
</script>